<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('工夹具全寿命智能管理系统')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        if(sessionStorage.jwt == null){
            self.location="login"
        }

        var data4Vue = {
            uri:'useinfos',
            beans: [],
            bean: { id: 0, shift: '',fid:'',usename:'',uselocation:'',retname:'',writename:'',remark:''},
            pagination:{},
//            存放备注信息
            remark1:'',
            outdate1:'',
            fid1:'',
//            搜索关键字
            keyword:''
        };
        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list(0);
            },
            methods: {
                list:function(start){
                    var url =  this.uri+ "?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content   ;
                    });
                },
//                添加
                add:function () {

                    if(!checkEmpty(this.bean.shift, "班次"))
                        return;
                    if (!checkEmpty(this.bean.fid, "工具夹编号"))
                        return;
                    if (!checkEmpty(this.bean.usename, "出库签字"))
                        return;
                    if (!checkEmpty(this.bean.uselocation, "使用位置"))
                        return;




                    var url = this.uri;

                    axios.post(url,this.bean).then(function(response){

                        if (response.data.code==1){
                            if(response.data.message=="不存在")
                            {alert("该工具夹不存在！")}
                            if(response.data.message=="已借出")
                            {alert("该工具夹已借出！")}
                        }
                        if(response.data.code==0)
                        {
                        alert("添加成功");
                        $('#myModal1').modal('hide');
                        vue.list(0);
                        vue.bean =  { id: 0, shift: '',fid:'',usename:"",retname:'',writename:'',remark:''};
                        }

                    });
                },
//根据id获取数据
                get:function (id) {
                    var url = this.uri+"/"+id;
                    axios.get(url).then(function(response) {
                        vue.bean = response.data;
                    });
                },
//
                update:function () {
//                    if(!checkEmpty(this.bean.shift, "班次"))
//                        return;
//                    if(!checkEmpty(this.bean.usename, "出库签字"))
//                        return;
//                    if(!checkEmpty(this.bean.uselocation, "使用位置"))
//                        return;
//                    if(!checkEmpty(this.bean.retname, "入库签字"))
//                        return;
//                    if(!checkEmpty(this.bean.writename, "登记人"))
//                        return;
//                    if(!checkEmpty(this.bean.remark, "备注"))
//                        return;


                    var url = this.uri;
                    axios.put(url,vue.bean).then(function(response){
                        alert("操作成功");
                        $('#myModal3').modal('hide');
                        $('#myModal').modal('hide');
                        vue.list(0);
                        vue.bean =  { id: 0, shift: '',fid:'',usename:"",retname:'',writename:'',remark:''};
                    });
                },

//                删除
                deleteBean:function (id) {
                    var d = confirm("是否要删除");
                    if(d===true)
                    {
                        var url = this.uri+"/"+id;
                        axios.delete(url).then(function(response){
                            alert("删除成功");
                            vue.list(0);
                        });}
                },

                load:function (remark,outdate,fid) {
                    this.remark1=remark;
                    this.outdate1=outdate;
                    this.fid1=fid;
                },

//                清理数据
                clear:function () {
                    vue.bean = { id: 0, shift: '',fid:'',usename:'',uselocation:'',retname:'',writename:'',remark:''};
                },
                
                b1:function () {
                    if(sessionStorage.jwt <= 300){
                        alert("您没有权限访问该界面")
                    }
                    else
                    self.location='admin_fixture';
                },
                b2:function () {
                    if(sessionStorage.jwt <= 600){
                        alert("您没有权限访问该界面")
                    }
                    else
                        self.location='admin_user';
                },
//                搜索
                search:function () {
                    var key=this.keyword;
                    var url =  "searchs/"+key;
                    axios.get(url).then(function(response) {
                        if(response.data.code==1){
                            alert("没有该工夹具的使用记录");
                        }
                        else{
                            self.location="search?keyword="+key;
                        }

                    });
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                }

            }


        });
    });

</script>

<div class="page"  id="workingArea">


    <!-- 左部 -->
    <div class="page-content d-flex align-items-stretch" >


        <nav class="side-navbar">
            <!-- 头像名字部分-->
            <div class="sidebar-header d-flex align-items-center">
                <div class="avatar"><img src="img/admin/admin.jpg" alt="..." class="img-fluid rounded-circle"></div>
                <div class="title">
                    <h1 class="h4"><span th:if="${null!=session.user}">
                        <a href="#" th:text="${session.user.name}"></a>
                        </span></h1>
                    <p>Welcome</p>
                </div>
            </div>

            <!-- 左边菜单-->
            <span class="heading">管理</span>
            <ul class="list-unstyled">
                <li class="active"><a href="admin_useinfo" >使用情况管理 </a></li>
                <li ><a href="admin_error" >故障预警管理 </a></li>
                <li><a href="#" @click="b1">工夹具管理</a></li>
                <li ><a href="#" @click="b2">用户管理</a></li>
            </ul>
        </nav>



        <!-- 右部部分 -->
        <div class="content-inner" >
            <!-- 管理标题-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">
                        使用情况管理
                        <span style="padding-left: 700px"><input  type="text" v-model="keyword" placeholder="请输入想要搜索的编号">
                        <!--<button  type="submit" class="searchButton">搜索</button>-->
                        <button  @click="search" class="btn btn-primary">搜索</button>
                            </span>
                    </h2>
                </div>
            </header>

            <!-- 表格 -->

            <section class="tables" >
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive" >
                                        <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th >班次</th>
                                                <th >工夹具编号</th>
                                                <th >存放库位</th>
                                                <th>出库时间</th>
                                                <th>出库签字</th>
                                                <th>使用位置</th>
                                                <th>入库时间</th>
                                                <th>入库签字</th>
                                                <th>登记人</th>
                                                <th>入库登记</th>
                                                <th>修改</th>
                                                <th>删除</th>

                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="bean in beans"  >
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.shift}}</td>
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.fid}}</td>
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.location}}</td>
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.outdate| formatDateFilter}}</td>
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.usename}}</td>
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.uselocation}}</td>
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.indate| formatDateFilter}}</td>
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.retname}}</td>
                                                <td data-toggle="modal" data-target="#myModal2" @click="load(bean.remark,bean.outdate,bean.fid)">{{bean.writename}}</td>
                                                <!--<td>{{bean.remark}}</td>-->
                                                <td><a herf="#" @click="get(bean.id)"><span data-toggle="modal" data-target="#myModal"><img src="img/admin/edit.jpg" width="30" ></span></a></td>
                                                <td><a herf="#" @click="get(bean.id)"><span data-toggle="modal" data-target="#myModal3"><img src="img/admin/edit.jpg" width="30" ></span></a></td>
                                                <td><a  herf="#" @click="deleteBean(bean.id)"><img src="img/admin/delete.jpg" width="30" ></a></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <div th:replace="include/admin/adminPage::html" ></div>

            <!--显示备注-->
            <div class="modal fade" id="myModal2"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <!-- <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> -->
                            <h4 class="modal-title">备注：编号{{fid1}}  </h4>
                            <h4 class="modal-title">出库时间：{{outdate1| formatDateFilter}}</h4>
                        </div>
                        <div class="modal-body">
                            <div class="panel-body">

 <textarea   class="form-control" style="height: 300px">
                                       {{remark1}}        </textarea>



                            </div>
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-success" type="button">关闭</button>

                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>


            <div class="modal fade" id="myModal"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <!-- <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> -->
                            <h4 class="modal-title">登记入库信息</h4>
                        </div>
                        <div class="modal-body">
                            <div class="panel-body">
                                <table class="table table-hover" align="center" >
                                    <tr >
                                        <td>入库签字</td>
                                        <td><input    type="text"  v-model="bean.retname" class="form-control" placeholder="请输入姓名"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button" @click="clear">关闭</button>
                            <button  class="btn btn-default" type="button" @click="update">提交</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>




            <div align="center">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
                     登记使用
                </button>
            </div>
            <div class="modal fade" id="myModal1"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <!-- <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> -->
                            <h4 class="modal-title">登记使用信息</h4>
                        </div>
                        <div class="modal-body">
                            <div class="panel-body">
                                <table class="table table-hover" align="center" >
                                    <tr >
                                        <td>班次</td>
                                        <td><select name="" v-model="bean.shift" class="indexSelect form-control">
                                            <option value="白">白</option>
                                            <option value="夜">夜</option>

                                        </select></td>
                                    </tr>
                                    <tr>
                                        <td>工夹具编号</td>
                                        <td><input    type="text"  v-model="bean.fid" class="form-control" placeholder="请输入工夹具编号"></td>
                                    </tr>
                                    <tr>
                                        <td>出库签字</td>
                                        <td><input   type="text"  v-model="bean.usename" class="form-control" placeholder="请输入姓名"></td>
                                    </tr>

                                    <tr>
                                        <td>使用位置</td>
                                        <td><input   type="text"  v-model="bean.uselocation" class="form-control" placeholder="请输入使用位置"></td>
                                    </tr>
                                    <tr>
                                        <td>备注</td>
                                        <td>
                                            <textarea  v-model="bean.remark" class="form-control" placeholder="请输入备注">
                                                </textarea>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button" >关闭</button>
                            <button  class="btn btn-default" type="button" @click="add">提交</button>

                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>


            <!--修改-->
            <div class="modal fade" id="myModal3"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <!-- <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> -->
                            <h4 class="modal-title">修改使用信息</h4>
                        </div>
                        <div class="modal-body">
                            <div class="panel-body">
                                <table class="table table-hover" align="center" >
                                    <tr >
                                        <td>班次</td>
                                        <td><select name="" v-model="bean.shift" class="indexSelect form-control">
                                            <option value="白">白</option>
                                            <option value="夜">夜</option>

                                        </select></td>
                                    </tr>

                                    <tr>
                                        <td>出库签字</td>
                                        <td><input   type="text"  v-model="bean.usename" class="form-control" placeholder="请输入姓名"></td>
                                    </tr>

                                    <tr>
                                        <td>使用位置</td>
                                        <td><input   type="text"  v-model="bean.uselocation" class="form-control" placeholder="请输入使用位置"></td>
                                    </tr>

                                    <tr>
                                        <td>入库签字</td>
                                        <td><input   type="text"  v-model="bean.retname" class="form-control" placeholder="请输入姓名"></td>
                                    </tr>

                                    <tr>
                                        <td>登记人</td>
                                        <td><input   type="text"  v-model="bean.writename" class="form-control" placeholder="请输入姓名"></td>
                                    </tr>

                                    <tr>
                                        <td>备注</td>
                                        <td>
                                            <textarea  v-model="bean.remark" class="form-control" placeholder="请输入备注">
                                                </textarea>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button" @click="clear">关闭</button>
                            <button  class="btn btn-default" type="button" @click="update">提交</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>



            <!--页脚部分-->
            <div th:replace="include/admin/adminFooter::html" ></div>
        </div>
    </div>
</div>



</body>
</html>
